<template>
  <div class="a3-container">
    <div class="header">
      <h1><el-icon><Document /></el-icon> QA对质量审核</h1>
      <div class="user-info">
        <el-icon><User /></el-icon>
        <span class="welcome">欢迎您 <span class="real-name">{{ realName }}</span><span class="username">{{ username }}</span></span>
        <el-button class="logout-btn" @click="handleLogout" type="danger">
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-button>
      </div>
    </div>
    
    <div class="processed-count-text">
      <el-icon><DataLine /></el-icon> 已处理QA对数：{{ processedCount }}
      <el-divider direction="vertical" />
      <el-icon><Timer /></el-icon> 待处理QA对数：{{ pendingCount }}
    </div>
    
    <div class="main-content" :class="{ 'full-width': !currentPdf }">
      <!-- PDF预览部分 -->
      <div class="section pdf-section" :class="{ 'full-width': !currentPdf }">
        <div class="section-header">
          <h2>PDF文件预览</h2>
          <div class="view-toggle">
            <el-radio-group v-model="viewType" @change="handleViewTypeChange">
              <el-radio-button label="pending">未处理</el-radio-button>
              <el-radio-button label="processed">已处理</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="pdf-list" v-if="pdfList.length > 0">
          <div v-for="item in paginatedPdfList" 
               :key="item.id" 
               :class="['pdf-item', { active: currentPdf?.id === item.id }]">
            <div class="pdf-info" @click="selectPdf(item)">
              <span class="pdf-name">{{ item.fileName }}</span>
              <span class="pdf-time">上传时间：{{ new Date(item.uploadTime).toLocaleString('zh-CN', { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false 
              }) }}</span>
            </div>
            <div class="pdf-actions">
              <el-button 
                type="primary" 
                size="small" 
                @click.stop="downloadPdf(item)"
                :loading="item.downloading">
                <el-icon><Download /></el-icon>
                下载
              </el-button>
            </div>
          </div>
          <!-- 分页组件 -->
          <div class="pdf-pagination">
            <el-pagination
              v-model:current-page="pdfCurrentPage"
              v-model:page-size="pdfPageSize"
              :page-sizes="[5, 7]"
              :total="pdfList.length"
              layout="total, sizes, prev, pager, next"
              @size-change="handlePdfSizeChange"
              @current-change="handlePdfCurrentChange"
            />
          </div>
        </div>
        <div v-else class="no-data">暂无待审核的PDF文件</div>
      </div>

      <!-- QA对审核部分 -->
      <div class="section qa-section" v-if="currentPdf">
        <div class="section-header">
          <h2>问答对审核</h2>
        </div>

        <div class="qa-list" v-if="qaList.length > 0">
          <div v-for="(qa, index) in qaList" 
               :key="qa.id"
               :class="['qa-item', { 
                 'qa-item-approved': qa.status === 'approved', 
                 'qa-item-rejected': qa.status === 'rejected',
                 'qa-item-current': index === currentPage - 1
               }]">
            <div class="qa-header">
              <span class="qa-index">问答对 #{{ index + 1 }}</span>
              <div class="qa-status" v-if="qa.status">
                <el-tag :type="qa.status === 'approved' ? 'success' : 'danger'">
                  {{ qa.status }}
                </el-tag>
              </div>
            </div>
            <div class="qa-content">
              <div class="qa-field">
                <label>问题：</label>
                <div class="qa-text" v-if="!qa.editing">{{ qa.instruction }}</div>
                <el-input
                  v-else
                  v-model="qa.instruction"
                  type="textarea"
                  rows="3"
                  placeholder="请输入问题"
                />
              </div>
              <div class="qa-field">
                <label>答案：</label>
                <div class="qa-text" v-if="!qa.editing">{{ qa.output }}</div>
                <el-input
                  v-else
                  v-model="qa.output"
                  type="textarea"
                  rows="5"
                  placeholder="请输入答案"
                />
              </div>
              <div class="qa-actions">
                <template v-if="viewType !== 'processed'">
                  <div class="qa-edit-actions" v-if="qa.editing">
                    <el-button type="primary" @click="confirmEdit(index)">确认</el-button>
                    <el-button @click="cancelEdit(index)">取消</el-button>
                  </div>
                  <div class="qa-review-actions" v-else>
                    <el-button type="primary" @click="editQa(index)" 
                      :disabled="qa.statusCode === 2 || qa.statusCode === 3">
                      <el-icon><Edit /></el-icon>
                      编辑
                    </el-button>
                    <el-button 
                      :type="qa.status === 'approved' ? 'info' : 'success'"
                      @click="qa.status === 'approved' ? cancelApprove(index) : approveQa(index)"
                      :disabled="qa.status === 'rejected'">
                      <el-icon><Check /></el-icon>
                      {{ qa.status === 'approved' ? '取消通过' : '通过' }}
                    </el-button>
                    <el-button 
                      :type="qa.status === 'rejected' ? 'info' : 'danger'"
                      @click="qa.status === 'rejected' ? cancelReject(index) : rejectQa(index)"
                      :disabled="qa.status === 'approved'">
                      <el-icon><Close /></el-icon>
                      {{ qa.status === 'rejected' ? '取消驳回' : '驳回' }}
                    </el-button>
                  </div>
                </template>
                <div class="qa-feedback" v-if="qa.feedback">
                  <label>驳回原因：</label>
                  <div class="feedback-text">{{ qa.feedback }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 提交按钮移到这里 -->
          <div class="submit-section">
            <el-button 
              type="success" 
              size="large"
              @click="saveAllChanges"
              :disabled="!hasChanges">
              <el-icon><Check /></el-icon>
              提交所有更改
            </el-button>
          </div>
        </div>
        <div v-else class="no-data">当前PDF文件暂无问答对</div>
      </div>
    </div>
  </div>
</template>

<script>
import { baseURL, ip } from '@/config/baseURL';
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  Download, 
  Edit, 
  Check, 
  Close, 
  ArrowLeft, 
  ArrowRight, 
  Document, 
  User, 
  SwitchButton,
  DataLine,
  Timer
} from '@element-plus/icons-vue';
import request from '@/utils/request';
import axios from 'axios';

export default {
  name: 'A3Main',
  components: {
    Download,
    Edit,
    Check,
    Close,
    ArrowLeft,
    ArrowRight,
    Document,
    User,
    SwitchButton,
    DataLine,
    Timer
  },
  setup() {
    const router = useRouter();
    const username = ref('');
    const realName = ref('');
    const pdfList = ref([]);
    const currentPdf = ref(null);
    const qaList = ref([]);
    const originalQaList = ref([]);
    const loading = ref(false);
    const currentPage = ref(1);
    const qaStatusList = ref([]);
    const processedCount = ref(0);
    const pendingCount = ref(0);
    const pdfCurrentPage = ref(1);
    const pdfPageSize = ref(5);
    const viewType = ref('pending');

    // 计算是否有更改
    const hasChanges = computed(() => {
      return qaStatusList.value.length > 0;
    });

    // 计算当前显示的QA对
    const currentQa = computed(() => {
      return qaList.value[currentPage.value - 1] || {};
    });

    // 计算当前页的PDF列表
    const paginatedPdfList = computed(() => {
      const start = (pdfCurrentPage.value - 1) * pdfPageSize.value;
      const end = start + pdfPageSize.value;
      return pdfList.value.slice(start, end);
    });

    // 获取PDF列表
    const fetchPdfList = async () => {
      try {
        loading.value = true;
        // const response = await request.get('http://10.137.10.169:8080/api/me/reviewTask/file');
        const response = await request.get(ip + '/api/me/reviewTask/file');
        console.log("返回的数据", response.data);
        
        if (response.data.code === 200) {
          // 获取每个文件的详细信息
          const fileDetails = await Promise.all(
            response.data['computer-view'].map(async (item) => {
              try {
                // const detailResponse = await request.get(`http://10.137.10.169:8080/api/file/info/${item.fileId}`);
                const detailResponse = await request.get(ip + `/api/file/info/${item.fileId}`);
                if (detailResponse.data.code === 200) {
                  return {
                    ...item,
                    fileName: detailResponse.data.data.fileName,
                    uploadTime: detailResponse.data.data.uploadTime,
                    downloading: false
                  };
                }
                return {
                  ...item,
                  fileName: `文件${item.fileId}`,
                  uploadTime: new Date().toISOString(),
                  downloading: false
                };
              } catch (error) {
                console.error(`获取文件${item.fileId}详情失败:`, error);
                return {
                  ...item,
                  fileName: `文件${item.fileId}`,
                  uploadTime: new Date().toISOString(),
                  downloading: false
                };
              }
            })
          );
          
          pdfList.value = fileDetails;
          
          // 如果有文件，自动选择第一个文件
          if (fileDetails.length > 0) {
            currentPdf.value = fileDetails[0];
            // 获取第一个文件的QA列表
            await fetchQaList(fileDetails[0].id);
          }
        } else {
          throw new Error(response.data.msg || '获取PDF列表失败');
        }
      } catch (error) {
        console.error('获取PDF列表失败:', error);
        ElMessage.error('获取PDF列表失败');
      } finally {
        loading.value = false;
      }
    };

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 1:
          return '等待审核';
        case 2:
          return '计算机老师审核通过';
        case 3:
          return '计算机老师审核不通过';
        case 4:
          return '最后审核通过';
        case 5:
          return '最后审核不通过';
        case 6:
          return '被标记';
        default:
          return '未知状态';
      }
    };

    // 获取状态类型（用于标签颜色）
    const getStatusType = (status) => {
      switch (status) {
        case 1:
          return 'info';
        case 2:
          return 'success';  // 计算机老师审核通过 - 绿色
        case 3:
          return 'danger';   // 计算机老师审核不通过 - 红色
        case 4:
          return 'success';  // 最后审核通过 - 绿色
        case 5:
          return 'danger';   // 最后审核不通过 - 红色
        case 6:
          return 'warning';  // 被标记 - 黄色
        default:
          return 'info';     // 默认 - 灰色
      }
    };

    // 获取QA列表
    const fetchQaList = async (pdfId) => {
      try {
        loading.value = true;
        
        // const response = await request.get(`http://10.137.10.169:8080/api/me/reviewTask/qa/${pdfId}`);
        const response = await request.get(ip + `/api/me/reviewTask/qa/${pdfId}`);
        console.log("请求的文件id：", pdfId);
        console.log("问答对数据：", response.data);
        
        if (response.data.code === 200) {
          // 根据视图类型选择不同的数据源
          const qaData = viewType.value === 'processed' 
            ? response.data['qa-last'] || []
            : response.data['qa-view-computer'] || [];
          
          qaList.value = qaData.map(qa => ({
            ...qa,
            editing: false,
            status: getStatusText(qa.status),
            statusCode: qa.status,
            feedback: qa.feedback || '',
            instruction: qa.instruction || '',
            output: qa.output || '',
            llmOutput: qa.llmOutput || ''
          }));
          
          console.log('处理后的QA列表:', qaList.value);
          originalQaList.value = JSON.parse(JSON.stringify(qaList.value));
          qaStatusList.value = []; // 重置状态列表
          currentPage.value = 1;
        } else {
          qaList.value = [];
          originalQaList.value = [];
          qaStatusList.value = [];
          throw new Error(response.data.msg || '获取问答对数据失败');
        }
      } catch (error) {
        console.error('获取问答对列表失败:', error);
        ElMessage.error('获取问答对列表失败');
      } finally {
        loading.value = false;
      }
    };

    // 选择PDF
    const selectPdf = async (pdf) => {
      try {
      if (hasChanges.value) {
        const confirm = window.confirm('有未保存的更改，是否继续？');
        if (!confirm) return;
      }
      currentPdf.value = pdf;
      currentPage.value = 1;
        
        // 无论是否在已处理视图，都重新获取QA对数据
      await fetchQaList(pdf.id);
      } catch (error) {
        console.error('选择PDF失败:', error);
        ElMessage.error('选择PDF失败');
      }
    };

    // 通过问答对
    const approveQa = async (index) => {
      try {
        const qa = qaList.value[index];
        qa.status = 'approved';
        qa.feedback = '';
        
        // 更新状态列表
        const existingIndex = qaStatusList.value.findIndex(item => item.id === qa.id);
        if (existingIndex !== -1) {
          qaStatusList.value[existingIndex].status = 1;
        } else {
          qaStatusList.value.push({
            id: qa.id,
            status: 1
          });
        }
        
        ElMessage.success('审核通过成功');
      } catch (error) {
        console.error('审核通过失败:', error);
        ElMessage.error('审核通过失败');
      }
    };

    // 驳回问答对
    const rejectQa = async (index) => {
      try {
        const qa = qaList.value[index];
        qa.status = 'rejected';
        qa.feedback = '';
        
        // 更新状态列表
        const existingIndex = qaStatusList.value.findIndex(item => item.id === qa.id);
        if (existingIndex !== -1) {
          qaStatusList.value[existingIndex].status = 2;
        } else {
          qaStatusList.value.push({
            id: qa.id,
            status: 2
          });
        }
        
        ElMessage.success('驳回成功');
      } catch (error) {
        console.error('驳回失败:', error);
        ElMessage.error('驳回失败');
      }
    };

    // 取消通过
    const cancelApprove = async (index) => {
      try {
        const qa = qaList.value[index];
        qa.status = null;
        qa.feedback = '';
        
        // 从状态列表中移除
        qaStatusList.value = qaStatusList.value.filter(item => item.id !== qa.id);
        
        ElMessage.success('已取消通过');
      } catch (error) {
        console.error('取消通过失败:', error);
        ElMessage.error('取消通过失败');
      }
    };

    // 取消驳回
    const cancelReject = async (index) => {
      try {
        const qa = qaList.value[index];
        qa.status = null;
        qa.feedback = '';
        
        // 从状态列表中移除
        qaStatusList.value = qaStatusList.value.filter(item => item.id !== qa.id);
        
        ElMessage.success('已取消驳回');
      } catch (error) {
        console.error('取消驳回失败:', error);
        ElMessage.error('取消驳回失败');
      }
    };

    // 编辑问答对
    const editQa = (index) => {
      if (qaList.value[index].statusCode === 2 || qaList.value[index].statusCode === 3) {
        ElMessage.warning('已审核的问答对不能编辑');
        return;
      }
      qaList.value[index].editing = true;
    };

    // 确认编辑
    const confirmEdit = async (index) => {
      try {
        const qa = qaList.value[index];
        const currentTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
        
        const requestData = {
          output: qa.output,
          input: "",
          system: "",
          instruction: qa.instruction,
          creatorId: 0,
          id: qa.id,
          fileId: currentPdf.value.id,
          status: qa.statusCode || 0
        };

        console.log("更新QA对的数据：", requestData);
        // const response = await request.post('http://10.137.10.169:8080/api/update/qa', requestData);
        const response = await request.post(ip + '/api/update/qa', requestData);
        
        if (response.data.code === 200) {
          ElMessage.success('更新成功');
          qa.editing = false;
          // 更新原始数据
          originalQaList.value[index] = { ...qa };
        } else {
          throw new Error(response.data.msg || '更新失败');
        }
      } catch (error) {
        console.error('更新失败:', error);
        ElMessage.error('更新失败');
      }
    };

    // 取消编辑
    const cancelEdit = (index) => {
      const originalQa = originalQaList.value[index];
      qaList.value[index] = { ...originalQa, editing: false };
    };

    // 保存所有更改
    const saveAllChanges = async () => {
      try {
        loading.value = true;
        // 构造状态列表
        const statusList = qaStatusList.value.map(item => ({
          id: item.id,
          status: item.status
        }));

        console.log("请求的数据：", statusList);
        // const response = await request.post('http://10.137.10.169:8080/api/view/qa/computer', statusList);
        const response = await request.post(ip + '/api/view/qa/computer', statusList);
        if (response.data.code === 200) {
          ElMessage.success('提交成功');
          // 清空状态列表
          qaStatusList.value = [];
          // 重新获取QA列表和PDF列表
          await Promise.all([
            fetchQaList(currentPdf.value.id),
            fetchPdfList(),
            fetchStats()
          ]);
        } else {
          throw new Error(response.data.msg || '提交失败');
        }
      } catch (error) {
        console.error('提交失败:', error);
        ElMessage.error('提交失败');
      } finally {
        loading.value = false;
      }
    };

    // 下载PDF文件
    const downloadPdf = async (pdf) => {
      if (!pdf.downloading) {
        pdf.downloading = true;
        try {
          const response = await request({
            // url: `http://10.137.10.169:8080/api/file/download/${pdf.fileId}`,
            url: ip + `/api/file/download/${pdf.fileId}`,
            responseType: 'blob'
          });
          
          // 创建下载链接
          const blob = new Blob([response.data], { type: 'application/pdf' });
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = pdf.articleTitle || `文件_${pdf.fileId}.pdf`;
          
          // 触发下载
          document.body.appendChild(link);
          link.click();
          
          // 清理
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);

          ElMessage.success('下载成功');
        } catch (error) {
          console.error('下载失败:', error);
          ElMessage.error('下载失败，请重试');
        } finally {
          pdf.downloading = false;
        }
      }
    };

    // 退出登录
    const handleLogout = () => {
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('username');
      localStorage.removeItem('userRole');
      localStorage.removeItem('token');
      router.push('/login');
    };

    // 获取统计数据
    const fetchStats = async () => {
      try {
        const response = await request({
          method: 'get',
          // url: 'http://10.137.10.169:8080/api/Static/handle'
          url: ip + '/api/Static/handle'
        });
        
        if (response.data && response.data.code === 200) {
          processedCount.value = response.data.data.qaCounted || 0;
          pendingCount.value = response.data.data.qaCount || 0;
        } else {
          throw new Error(response.data?.msg || '获取数据失败');
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
        ElMessage.error('获取统计数据失败');
      }
    };

    // 处理PDF列表分页大小变化
    const handlePdfSizeChange = (val) => {
      pdfPageSize.value = val;
      pdfCurrentPage.value = 1;
    };

    // 处理PDF列表页码变化
    const handlePdfCurrentChange = (val) => {
      pdfCurrentPage.value = val;
    };

    // 处理视图类型切换
    const handleViewTypeChange = async (type) => {
      // 切换视图时先清空qaList，防止显示旧数据
      qaList.value = [];
      try {
        loading.value = true;
        if (type === 'processed') {
          // const response = await request.get('http://10.137.10.169:8080/api/me/submitted');
          const response = await request.get(ip + '/api/me/submitted');
          if (response.data.code === 200) {
            // 获取每个文件的详细信息
            const fileDetails = await Promise.all(
              response.data['file-view'].map(async (item) => {
                try {
                  // const detailResponse = await request.get(`http://10.137.10.169:8080/api/file/info/${item.fileId}`);
                  const detailResponse = await request.get(ip + `/api/file/info/${item.fileId}`);
                  if (detailResponse.data.code === 200) {
                    return {
                      id: item.id,
                      fileId: item.fileId,
                      fileName: detailResponse.data.data.fileName,
                      uploadTime: detailResponse.data.data.uploadTime,
                      status: item.status,
                      major: item.major,
                      contentSummary: item.contentSummary,
                      articleTitle: item.articleTitle,
                      downloading: false
                    };
                  }
                  return {
                    id: item.id,
                    fileId: item.fileId,
                    fileName: item.articleTitle || `文件${item.fileId}`,
                    uploadTime: item.createTime,
                    status: item.status,
                    major: item.major,
                    contentSummary: item.contentSummary,
                    articleTitle: item.articleTitle,
                    downloading: false
                  };
                } catch (error) {
                  console.error(`获取文件${item.fileId}详情失败:`, error);
                  return {
                    id: item.id,
                    fileId: item.fileId,
                    fileName: item.articleTitle || `文件${item.fileId}`,
                    uploadTime: item.createTime,
                    status: item.status,
                    major: item.major,
                    contentSummary: item.contentSummary,
                    articleTitle: item.articleTitle,
                    downloading: false
                  };
                }
              })
            );
            pdfList.value = fileDetails;
            
            // 如果有文件，自动选择第一个文件
            if (fileDetails.length > 0) {
              currentPdf.value = fileDetails[0];
              // 获取第一个文件的QA列表
              await fetchQaList(fileDetails[0].id);
            } else {
              // 如果没有文件，清空当前选中的文件和QA列表
              currentPdf.value = null;
              qaList.value = [];
            }
          }
        } else {
          // 切换回未处理视图时，重新获取未处理列表
          await fetchPdfList();
        }
      } catch (error) {
        console.error('获取文件列表失败:', error);
        ElMessage.error('获取文件列表失败');
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      username.value = localStorage.getItem('username') || '用户';
      // 获取真实姓名
      axios({
        method: 'get',
        url: ip + '/api/me',
        headers: {
          'auth': localStorage.getItem('auth')
        }
      }).then(res => {
        if (res.data && res.data.code === 200) {
          realName.value = res.data.data.realName || '';
        }
      }).catch(() => {});
      fetchPdfList();
      fetchStats();
    });

    return {
      username,
      realName,
      pdfList,
      currentPdf,
      qaList,
      hasChanges,
      loading,
      selectPdf,
      currentPage,
      currentQa,
      approveQa,
      rejectQa,
      saveAllChanges,
      handleLogout,
      downloadPdf,
      cancelApprove,
      cancelReject,
      getStatusType,
      editQa,
      confirmEdit,
      cancelEdit,
      processedCount,
      pendingCount,
      pdfCurrentPage,
      pdfPageSize,
      paginatedPdfList,
      handlePdfSizeChange,
      handlePdfCurrentChange,
      viewType,
      handleViewTypeChange,
    };
  }
};
</script>

<style scoped>
.a3-container {
  width: 100%;
  min-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.main-content.full-width {
  display: block;
}

.section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pdf-section {
  flex: 1;
  max-width: 400px;
  transition: all 0.3s ease;
}

.pdf-section.full-width {
  max-width: none;
}

.qa-section {
  flex: 2;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  min-width: 800px;
}

/* PDF列表样式 */
.pdf-list {
  margin-top: 20px;
}

.pdf-item {
  padding: 12px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.pdf-item:hover {
  background-color: #f5f7fa;
}

.pdf-item.active {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.pdf-info {
  flex: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pdf-name {
  font-weight: bold;
  color: #303133;
}

.pdf-time {
  font-size: 12px;
  color: #909399;
}

.pdf-actions {
  margin-left: 16px;
}

/* 问答对样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.view-toggle {
  display: flex;
  align-items: center;
}

.view-toggle .el-radio-group {
  display: flex;
  gap: 10px;
}

.view-toggle .el-radio-button__inner {
  padding: 8px 16px;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 10px;
  width: 100%;
}

.qa-item {
  padding: 16px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  transition: all 0.3s;
  background-color: #fff;
  width: 100%;
}

.qa-item-current {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.qa-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.qa-index {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  color: #409EFF;
}

.qa-status {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qa-content {
  margin-top: 20px;
}

.qa-field {
  margin-bottom: 16px;
}

.qa-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #606266;
  font-weight: bold;
  font-size: 15px;
}

.qa-text {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 6px;
  min-height: 24px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
}

.qa-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.qa-edit-actions,
.qa-review-actions {
  display: flex;
  gap: 8px;
}

.qa-feedback {
  margin-top: 12px;
  padding: 12px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.feedback-text {
  color: #F56C6C;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* 调整输入框样式 */
.qa-field .el-textarea__inner {
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
}

/* 调整按钮样式 */
.qa-actions .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

/* 调整标签样式 */
.qa-status .el-tag {
  padding: 6px 12px;
  font-size: 13px;
}

/* 按钮样式 */
.edit-btn {
  background-color: #409EFF;
  color: white;
}

.delete-btn {
  background-color: #F56C6C;
  color: white;
}

.confirm-btn {
  background-color: #67C23A;
  color: white;
}

.cancel-btn {
  background-color: #909399;
  color: white;
}

.save-btn {
  background-color: #409EFF;
  color: white;
  padding: 8px 16px;
}

.save-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

button {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

button:hover:not(:disabled) {
  opacity: 0.8;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

/* 保持原有的header样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #409EFF;
}

.header h1 .el-icon {
  font-size: 24px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info .el-icon {
  font-size: 18px;
  color: #409EFF;
}

.welcome {
  font-size: 16px;
  color: #606266;
}

.real-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 4px;
}

.username {
  font-size: 16px;
  color: #409EFF;
  font-weight: bold;
  margin: 0 10px;
}

.logout-btn {
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #e64242;
}

.qa-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.qa-counter {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
}

.qa-navigation-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.qa-item {
  margin: 0 auto;
  max-width: 800px;
}

.qa-actions .el-button {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qa-navigation-buttons .el-button {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pdf-actions .el-button {
  display: flex;
  align-items: center;
  gap: 5px;
}

.processed-count-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #606266;
  margin: 20px 0;
  padding: 12px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.processed-count-text .el-icon {
  color: #409EFF;
}

.processed-count-text .el-divider {
  margin: 0 12px;
  height: 1em;
}

.pdf-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.pdf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 自定义滚动条样式 */
.qa-section::-webkit-scrollbar {
  width: 8px;
}

.qa-section::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.qa-section::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.qa-section::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.submit-section {
  margin-top: 30px;
  padding: 20px;
  display: flex;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  border: 1px dashed #dcdfe6;
}

.submit-section .el-button {
  padding: 12px 30px;
  font-size: 16px;
}

.submit-section .el-button .el-icon {
  margin-right: 8px;
  font-size: 18px;
}
</style> 